<template>
	<div v-loading="loading" style="height:100%;">
		<!--<panel header="所有分店" :list="data" type="1" @on-click-item="info"></panel>-->
    <div class="dpList" v-for="(item,index) in data" :key="index" @click="info(item,index)">
      <img class="dpimg" :src="item.src" alt="">
      <div class="right-text">
        <p class="dptitle">{{item.name}}</p>
        <p class="dpms">{{item.regions_name}}</p>
        <p class="julis" v-if="juli.length">
          <i class="iconfont icon-zuobiao1"></i>{{juli[index].jl}}km
        </p>
        <p class="julis" v-else>
          <i class="iconfont icon-zuobiao1"></i>0km
        </p>
      </div>
    </div>
    <back></back>
	</div>
</template>

<script>
	import { Panel } from 'vux';
  import axios from 'axios';
  import back from '@/components/back/backPrev';
	export default {
		directives: {

		},
		components:{
			Panel,
      back
		},
		data(){
			return {
        pointA: 0,
        juli:[],
        datas:[]
			}
		},
		methods : {
			info(item,index){
				this.$store.commit('user/stores/form',item)
				this.$router.push({name:'storeinfo',params:{
				    obj:this.juli[index]
          }});
			},
      //获取店铺列表
      getData(){

        for(var i=0;i<this.data.length;i++){
          this.data[i].src = 'http://banbq.woyii.com/upload/201507/29/0_1438169781Z4N3.jpg'
          var s = encodeURIComponent(this.data[i].regions_name+this.data[i].address);
          var that = this;
          //闭包
          ((x)=>{
            $.ajax({
              type: "POST",
              url: 'http://api.map.baidu.com/geocoder/v2/?ak=gMi17m4MgNplH5L6q7zK2qAi19hmffm6&output=json&address='+s,
              dataType: "JSONP",
              async:false,
              success: function (data) {
                if (parseInt(data.status) == 0) {
                  var juliss = that.jisuan(that.pointA.lat,that.pointA.lng,data.result.location.lat,data.result.location.lng)
                  that.juli[x]={
                    jl:juliss,
                    lat:data.result.location.lat,
                    lng:data.result.location.lng
                  }
                }
              },
              error () {
                this.$message({
                  message: '登陆过期，请重新登陆！',
                  type: 'error'
                });
                localStorage.removeItem('user');
                localStorage.removeItem('company');
                localStorage.removeItem('api_token');
                localStorage.removeItem('refresh_token');
                location.reload()
              }
            });
          })(i)
        }
        this.fuzhi()
      },
      // 获取我的经纬度
      getMyPoint () {
        var self = this
        var geolocation = new BMap.Geolocation()
        geolocation.getCurrentPosition(function (res) {
          self.pointA = new BMap.Point(res.point.lng, res.point.lat)  // 通过浏览器获得我的经纬度
        })
      },
      // 测量百度地图两个点间的距离
      getDistance (itemPoint) {
        var map = new BMap.Map('')
        var pointB = new BMap.Point(parseFloat(itemPoint.log), parseFloat(itemPoint.lat))  // 店铺的经纬度
        var distance = (map.getDistance(this.pointA, pointB) / 1000).toFixed(2) // 保留小数点后两位
        return distance
      },
      getRad(d){
        var PI = Math.PI;
        return d*PI/180.0;
      },
      // 计算距离
      jisuan(lat1,lng1,lat2,lng2){
        var f = this.getRad((lat1 + lat2)/2);
        var g = this.getRad((lat1 - lat2)/2);
        var l = this.getRad((lng1 - lng2)/2);
        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);
        var s,c,w,r,d,h1,h2;
        var a = 6378137.0;//The Radius of eath in meter.
        var fl = 1/298.257;
        sg = sg*sg;
        sl = sl*sl;
        sf = sf*sf;
        s = sg*(1-sl) + (1-sf)*sl;
        c = (1-sg)*(1-sl) + sf*sl;
        w = Math.atan(Math.sqrt(s/c));
        r = Math.sqrt(s*c)/w;
        d = 2*w*a;
        h1 = (3*r -1)/2/c;
        h2 = (3*r +1)/2/s;
        s = d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
        s = s/1000;
        s = s.toFixed(2);//指定小数点后的位数。
        return s;
      },
      // 获取店仓的经纬度
      getLngLat(address){
			  // http://api.map.baidu.com/geocoder/v2/
        var s = encodeURIComponent(address);
        $.ajax({
              type: "POST",
              url: 'http://api.map.baidu.com/geocoder/v2/?ak=gMi17m4MgNplH5L6q7zK2qAi19hmffm6&output=json&address='+s,
              dataType: "JSONP",
              async:false,
              success: function (data) {
                  if (parseInt(data.status) == 0) {
                      // data.result.location.lng;
                      // data.result.location.lat;
                      return data.result.location;
                    }
              },
              error () {
                this.$message({
                  message: '登陆过期，请重新登陆！',
                  type: 'error'
                });
                localStorage.removeItem('user');
                localStorage.removeItem('company');
                localStorage.removeItem('api_token');
                localStorage.removeItem('refresh_token');
                location.reload()
              }
        });
        // axios.get('http://api.map.baidu.com/geocoder/v2/?address=地址&output=json&ak=秘钥',{
        //   params:{
        //     address:'四川省-成都市-锦江区 春熙路',
        //     output:'json',
        //     ak:'gMi17m4MgNplH5L6q7zK2qAi19hmffm6'
        //   }
        // })
        //   .then((res)=>{
        //     console.log(res)
        //   })
        //   .catch((err)=>{
        //     console.log(err)
        //   })
      },
      // 数据赋值
      fuzhi(){
        // console.log(this.juli)
      }
		},
		computed : {
			loading (){
				return this.$store.state.user.stores.loading;
			},
			data(){
				return this.$store.state.user.stores.data;
			}
		},
    mounted(){
		  if(sessionStorage.getItem('forms')){
        sessionStorage.removeItem('forms','')
      }
      if(sessionStorage.getItem('details')){
        sessionStorage.removeItem('details','')
      }
      var pointAs = sessionStorage.getItem('pointA');
      pointAs=JSON.parse(pointAs)
      this.pointA = pointAs
      this.getData()
      this.getLngLat()
    },
		created(){
			this.$store.dispatch('user/stores/initdata');
		},
		watch : {

		}
	}
</script>

<style>
  .dpList{
    display: flex;
    padding:10px;
    border-bottom:1px solid #f5f5f5;
    background: #fff;
  }
  .dpimg{
    width:70px;
    height:60px;
    margin:10px 0;
  }
  .right-text{
    width:70%;
    padding:5px 10px;
  }
  .dptitle{
    font-size:16px;
  }
  .dpms{
    font-size:14px;
    color:#999999;
  }
  .julis{
    color:#999;
    font-size:14px;
  }
</style>
